<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预订房间 - 酒店房间订阅系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
</head>
<body>
<div class="container">
    <header>
        <h1>预订房间</h1>
        <nav>
            <ul>
                <li><a href="${pageContext.request.contextPath}/hotel/">首页</a></li>
                <li><a href="${pageContext.request.contextPath}/hotel/available-rooms">可用房间</a></li>
                <li><a href="${pageContext.request.contextPath}/hotel/bookings">预订管理</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="form-container">
            <h2>预订房间 ${room.roomNumber}</h2>
            <div style="margin-bottom: 2rem; padding: 1rem; background: #f8f9fa; border-radius: 5px;">
                <p><strong>房间类型：</strong> ${room.roomType}</p>
                <p><strong>价格：</strong> ¥<fmt:formatNumber value="${room.price}" pattern="#,##0.00"/>/晚</p>
                <p><strong>描述：</strong> ${room.description}</p>
            </div>

            <form id="bookingForm">
                <input type="hidden" name="roomId" value="${room.roomId}">
                <input type="hidden" name="roomPrice" value="${room.price}">

                <div class="form-group">
                    <label for="customerName">姓名 *</label>
                    <input type="text" id="customerName" name="customerName" required>
                </div>

                <div class="form-group">
                    <label for="customerPhone">电话 *</label>
                    <input type="tel" id="customerPhone" name="customerPhone" required>
                </div>

                <div class="form-group">
                    <label for="customerEmail">邮箱</label>
                    <input type="email" id="customerEmail" name="customerEmail">
                </div>

                <div class="form-group">
                    <label for="checkInDate">入住日期 *</label>
                    <input type="date" id="checkInDate" name="checkInDate" required>
                </div>

                <div class="form-group">
                    <label for="checkOutDate">退房日期 *</label>
                    <input type="date" id="checkOutDate" name="checkOutDate" required>
                </div>

                <div class="form-group">
                    <label>总金额</label>
                    <div id="totalAmount" style="font-size: 1.5rem; color: #27ae60; font-weight: bold;">¥0.00</div>
                    <input type="hidden" name="totalAmount" id="totalAmountInput">
                </div>

                <div style="text-align: center;">
                    <button type="submit" class="btn btn-primary">确认预订</button>
                    <a href="${pageContext.request.contextPath}/hotel/available-rooms" class="btn" style="background: #95a5a6; color: white; margin-left: 1rem;">取消</a>
                </div>
            </form>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 酒店房间订阅系统. 保留所有权利.</p>
    </footer>
</div>

<script src="${pageContext.request.contextPath}/js/booking.js"></script>
</body>
</html>
